<template>
  <v-card style="margin-top: 15vh">
    <v-row>
      <v-col>
        <v-card
          :loading="loading"
          width="50vw"
          max-width="50vw"
          style="left: 14%"
        >
          <div :style="thumbnailVar" class="filter-box">
            <v-row style="margin-left: 0.7vw; margin-top: 1vh">
              <v-card-actions>
                <v-btn
                  color="light-blue lighten-3"
                  depressed
                  icon
                  outlined
                  @click="$router.go(-1)"
                  ><v-icon large> mdi-arrow-left-circle-outline</v-icon></v-btn
                >
              </v-card-actions>
            </v-row>
            <v-row style="margin-top: -1vh">
              <v-col v-if="article.thumbnail != null" style="max-width: 16vw">
                <v-avatar
                  class="ma-3"
                  height="22vh"
                  width="100%"
                  tile
                  style="left: 2vw"
                >
                  <v-img :src="article.thumbnail"></v-img>
                </v-avatar>
              </v-col>
              <v-col style="margin-left: 2vw">
                <span style="font-size: 36px; line-height：1.2em;"
                  >{{ article.title }}
                </span>
              </v-col>
            </v-row>
            <v-row
              style="
                margin-left: 2vw;
                margin-top: 3vh;
                bottom: 3vh;
                font-size: 20px;
              "
            >
              <v-col> 发布时间：{{ pubTime }} </v-col>
              <v-col align="right" style="margin-right: 2vw">
                来源：{{ article.source }}
              </v-col>
            </v-row>
          </div>
          <v-divider class="mx-4" style="margin-top: 1vh"></v-divider>
          <div style="background: #1e1e1e">
            <DocEditor :content="article.content" :read_only="true" />
          </div>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
        <v-card
          width="50vw"
          max-width="50vw"
          outlined
          color="white"
          style="left: 14.5%;margin-top:2vh"
        >
        <ArticleComment/>
        </v-card>
    </v-row>
  </v-card>
</template>

<script>
import DocEditor from "../../../components/views/common/DocEditor.vue";
import ArticleComment from "../../../components/views/comment/articleComment.vue"

export default {
  components: { DocEditor,ArticleComment},
  name: "ContentPage",
  data: () => ({
    articleId : "",
    article: {
      content: "无详细内容",
      pubTime: "1234567790",
    },
    loading: false,
    About_items: [],
    Hot_items: [],
  }),
  computed: {
    pubTime() {
      return this.article.pubTime.substring(0, 10);
    },
    thumbnailVar() {
      return {
        "--thumbnail-src":
          this.article.thumbnail != null
            ? "url(" + this.article.thumbnail + ")"
            // : "url(https://cdn.pixabay.com/photo/2016/09/22/06/32/blue-1686529_1280.jpg)",
            : "url(https://cdn.pixabay.com/photo/2016/03/27/07/32/clouds-1282314_960_720.jpg)"
      };
    },
  },
  created() {
    var id = this.$route.params.id;
    this.articleId = id
    console.log(this.articleId)
    if (id == undefined) return;
    this.$api.article
      .read(id)
      .then((res) => {
        if (res.success) {
          this.article = res.data;
        } else {
          this.$Message("打开文章失败：" + res.exc);
        }
      })
      .then(() => {
        this.$Message("打开文章失败：网络错误");
      });
  },
  methods: {
    reserve() {
      this.loading = true;

      setTimeout(() => (this.loading = false), 2000);
    },
  },
};
</script>

<style scoped>
.filter-box {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-image: var(--thumbnail-src);
  height: 40vh;
}
.filter-box:after {
  content: "";
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -30px;
  bottom: -30px;
  left: -30px;
  right: -30px;
  /*backdrop-filter: blur(10px);*/
  backdrop-filter: blur(15px);
  /* filter: blur(10px); */
  z-index: -1;
}
.comment{
  width: 1250px;
  height: 800px;
}
</style>
